<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title id="title">碳素云插件</title>
    <!-- 引入avalon -->
    <script src="./src/avalon.modern.min.js"></script>
    <!-- 引入bootstrap-->
    <link href="./src/bootstrap-all.css" rel="stylesheet" type="text/css"/>
    <script language="JavaScript" src="index.js"></script>
    <style>
        .mast {
            margin: 0;;
            /*padding:0;*/
            width: 100%;
            background: linear-gradient(68deg, #0c0841 0%, #850cf6 100%); /* W3C */
        }

        .masthead {
            padding: 90px 0 110px;
        }

        .mastIntroduce {
            color: #d1d1d1;
            line-height: 1.8;
            text-indent: 2em;
        }

        .container {
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
        }

        .lists {
            padding-right: 60px;
            padding-left: 60px;
        }

        .components {
            width: 980px;
            margin: 0 auto;
            padding: 20px;
            overflow: hidden;
            background: linear-gradient(50deg, #0a0d3e 0%, #4d3285 100%); /* W3C */
            border-radius: 6px;;

        }

        .components li {
            float: left;
            width: 900px;
            height: 435px;
            /*line-height: 140px;*/
            overflow: hidden;
            margin: 24px;
            text-align: center;
            background: #fff;
            border-radius: 10px;
        }

        .introduceText {
            margin: 5px;

        }
    </style>
</head>
<body style="padding: 0;background: #f4f4f4" ms-controller="index">
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand hidden-sm" data-toggle="iframe">
                <img src="./src/imgs/us.png" style="width:30px" alt=""/>
            </a>
        </div>
        <div class="navbar-collapse collapse" role="navigation">
            <ul class="nav navbar-nav">
                <li><a href="" class="navbar-brand hidden-sm" data-toggle="iframe"> 碳素云</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right hidden-sm">
                <li><a href="http://www.tansuyun.cn/">关于我们</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="mast">
    <div class="masthead container">
        <div style="color:#fff;text-align: center">
            <span style="font-size: 69px">TanSuYun</span>
            <span style="font-size: 25px">-Components</span>
        </div>
        <div class="mastIntroduce">
            <h2>TSYComponents使用文档说明</h2>

            <p>
                TSYComponents
                是一个简单易用迷你的开发组件，它最早发布于2016.02.23，
                为解决同一业务存在各种组件调用而开发出来的。</p>

            <p> 事实上，这问题并不可以简单地利用一般的前端模板加jQuery 事件委托 搞定，
                而且， 代码就充满了各种重复性的函数调用和功能。 因此彻底的将功能与html分离出来，就只能求助于组件。</p>

            <p>最初想到的是詹伟，尝试过chocolate，但不怎么好吃，很偶尔的机会，碰上了avalon，
                优雅的MVVM架构立马吸引住詹伟，他觉得这就是他一直寻找的组件料理之道。
            </p>
        </div>
    </div>
</div>
<div class="" style="text-align: center">
    <h1 style="text-shadow: 0 4px 3px #7d069f;">
        <!--<span style="font-size: 42px">TanSuYun</span>-->
        <span style="font-size: 25px">Components</span>
    </h1>
</div>
<div class="container">
    <div class="row lists">
        <ul class="components">
            <li ms-repeat="list">
                <div><h4>{{el.name}}</h4></div>
                <div class="introduceText">
                    <!--<iframe height="200px" width="180px">-->
                    <!--</iframe>-->
                    <!--<div ms-skip></div>-->
                    <textarea style="width: 90%;
    height: 200px;
    overflow: auto;
    border: 1px solid #c5c5c5;
    font-size:14px;" id="TestCode" wrap="logical">&lt;html&gt;

&lt;body&gt;

&lt;iframe src="/i/eg_landscape.jpg"&gt;&lt;/iframe&gt;

&lt;p&gt;一些老的浏览器不支持 iframe。&lt;/p&gt;
&lt;p&gt;如果得不到支持，iframe 是不可见的。&lt;/p&gt;


&lt;/body&gt;
&lt;/html&gt;
</textarea>
                    <input type="hidden" id="code" name="code" value="">
                    <!--<iframe src="demo.html" frameBorder="0" width="900" scrolling="no" height="90"></iframe>-->
                    <p>{{el.introduce}}</p>
                </div>
                <button style="width:300px;" class="btn btn-primary">下载</button>
            </li>
        </ul>

    </div>
</div>
</body>
</html>